<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘好货 - 首页</title>
    <script src="/static/css/tailwindcss.css"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4400',
                        secondary: '#FFB800',
                        dark: '#333333',
                        light: '#F5F5F5',
                        muted: '#666666'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>

    <!-- 轮播图 -->
    <section class="bg-white py-4">
        <div class="container mx-auto px-4">
            <div class="relative rounded-xl overflow-hidden shadow-md">
                <img src="https://fastly.picsum.photos/id/916/1200/400.jpg?hmac=o4dS7_FTQkR3EFkDqcdYtqHpihysGU7pk5JQPQUD4b8"
                     alt="促销活动" class="w-full h-auto">
                <div class="absolute inset-0 bg-gradient-to-r from-black/50 to-transparent flex items-center">
                    <div class="px-8 text-white max-w-md">
                        <h2 class="text-3xl font-bold mb-2">夏季大促销</h2>
                        <p class="mb-4">限时折扣，低至3折</p>
                        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-custom">
                            立即抢购
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 分类导航 -->
    <section class="bg-white py-6">
        <div class="container mx-auto px-4">
            <h2 class="text-xl font-bold mb-4">商品分类</h2>
            <div class="grid grid-cols-5 gap-4">
                <a href="#" class="flex flex-col items-center p-3 hover:bg-gray-50 rounded-lg transition-custom">
                    <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-2">
                        <i class="fa fa-laptop text-xl text-blue-600"></i>
                    </div>
                    <span class="text-sm">电子产品</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 hover:bg-gray-50 rounded-lg transition-custom">
                    <div class="w-14 h-14 rounded-full bg-pink-100 flex items-center justify-center mb-2">
                        <i class="fa fa-female text-xl text-pink-600"></i>
                    </div>
                    <span class="text-sm">服装</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 hover:bg-gray-50 rounded-lg transition-custom">
                    <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mb-2">
                        <i class="fa fa-home text-xl text-green-600"></i>
                    </div>
                    <span class="text-sm">家居</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 hover:bg-gray-50 rounded-lg transition-custom">
                    <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mb-2">
                        <i class="fa fa-shopping-basket text-xl text-purple-600"></i>
                    </div>
                    <span class="text-sm">食品</span>
                </a>
                <a href="#" class="flex flex-col items-center p-3 hover:bg-gray-50 rounded-lg transition-custom">
                    <div class="w-14 h-14 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
                        <i class="fa fa-book text-xl text-yellow-600"></i>
                    </div>
                    <span class="text-sm">图书</span>
                </a>
            </div>
        </div>
    </section>

    <!-- 热门商品 -->
    <section class="bg-white py-8 mt-4">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">热门商品</h2>
                <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <div v-for="product in products" :key="product.id"
                     class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-custom group">
                    <div class="relative">
                        <img :src="product.image" :alt="product.name" class="w-full h-48 object-cover">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-custom flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <button @click="addToCart(product.id)"
                                    class="bg-primary text-white px-4 py-2 rounded-full transform translate-y-4 group-hover:translate-y-0 transition-custom">
                                <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                            </button>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium text-sm mb-1 line-clamp-1">{{ product.name }}</h3>
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-sm">¥{{ product.price }}</span>
                            <span class="text-xs text-muted">月销1000+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 推荐商品 -->
    <section class="bg-white py-8 mt-4">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold">为您推荐</h2>
                <a href="#" class="text-primary hover:text-primary/80 text-sm flex items-center">
                    查看更多 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                <div v-for="product in recommendedProducts" :key="product.id"
                     class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-custom group">
                    <div class="relative">
                        <img :src="product.image" :alt="product.name" class="w-full h-48 object-cover">
                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-custom flex items-center justify-center opacity-0 group-hover:opacity-100">
                            <button @click="addToCart(product.id)"
                                    class="bg-primary text-white px-4 py-2 rounded-full transform translate-y-4 group-hover:translate-y-0 transition-custom">
                                <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                            </button>
                        </div>
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium text-sm mb-1 line-clamp-1">{{ product.name }}</h3>
                        <p class="text-xs text-muted mb-2 line-clamp-1">{{ product.description }}</p>
                        <div class="flex justify-between items-center">
                            <span class="text-primary font-bold text-sm">¥{{ product.price }}</span>
                            <span class="text-xs text-muted">月销1000+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <app-footer></app-footer>
</div>
<script src="/static/js/vue.js"></script>
<script src="/static/js/top.js"></script>
<script src="/static/js/foot.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/message.js"></script>
<script>
    // Vue实例
    new Vue({
        el: '#app',
        data: {
            util,
            products: [],
            recommendedProducts: []
        },
        created() {
            util.store.set("return-url", location.href);
            if (this.util.isLogin()) {
                this.loadProducts();
                this.loadRecommendProducts();
            } else location.href = '/login';
        },
        methods: {
            // 加载热门商品数据
            async loadProducts() {
                try {
                    const response = await fetch('/products/hot');
                    if (response.ok) {
                        const res = await response.json();
                        this.products = res.data;
                    } else {
                        const error = await response.json();
                        message.error(error.message);
                    }
                } catch (error) {
                    message.error('网络错误，请稍后重试');
                }
            },
            // 加载推荐商品数据
            async loadRecommendProducts() {
                try {
                    const response = await fetch('/products/recommend');
                    if (response.ok) {
                        const res = await response.json();
                        this.recommendedProducts = res.data;
                    } else {
                        const error = await response.json();
                        message.error(error.message);
                    }
                } catch (error) {
                    message.error('网络错误，请稍后重试');
                }
            },
            // 添加商品到购物车
            async addToCart(productId) {
                try {
                    const data = {
                        'product_id': productId,
                        'quantity': 1,
                    }
                    const response = await fetch('/carts', {
                        method: 'POST',
                        headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify(data)
                    });
                    if (response.ok) {
                        message.success('添加成功')
                    } else {
                        const error = await response.json();
                        message.error(error.message);
                    }
                } catch (error) {
                    message.error('网络错误，请稍后重试');
                }
            },

        }
    });
</script>
</body>
</html>